{% extends 'blog/base.html' %}

{% block title %}{{ author.username }} - 作者详情{% endblock %}

{% block section %}
<div class="container">
    <!-- 返回按钮 -->
    <div class="mb-5">
        <a href="javascript:history.back()" class="button is-light">
            <span class="icon">
                <i class="fas fa-arrow-left"></i>
            </span>
            <span>返回文章</span>
        </a>
    </div>

    <!-- 作者信息卡片 -->
    <div class="box author-card">
        <div class="is-flex is-align-items-center">
            <!-- 头像 -->
            <div class="author-avatar mr-5">
                {% if user_profile and user_profile.image %}
                <img src="{{ user_profile.image.url }}"
                     alt="用户头像"
                     class="is-rounded"
                     style="width: 120px; height: 120px; object-fit: cover;">
                {% else %}
                <div class="default-avatar has-text-centered">
                    <span class="icon is-large">
                        <i class="fas fa-user-circle fa-4x has-text-grey-lighter"></i>
                    </span>
                </div>
                {% endif %}
            </div>

            <!-- 基本信息 -->
            <div class="author-info">
                <h1 class="title is-3">
                    {% if user_profile and user_profile.nike_name %}
                        {{ user_profile.nike_name }}
                    {% else %}
                        {{ author.username }}
                    {% endif %}
                </h1>

                <!-- 统计信息 -->
                <div class="stats-tags mb-4">
                    <span class="tag is-info is-light">
                        <span class="icon">
                            <i class="fas fa-file-alt"></i>
                        </span>
                        <span>文章数：{{ page_obj.paginator.count }}</span>
                    </span>
                    <span class="tag is-success is-light">
                        <span class="icon">
                            <i class="fas fa-calendar-alt"></i>
                        </span>
                        <span>注册于：{{ author.date_joined|date:"Y年m月d日" }}</span>
                    </span>
                </div>

                <!-- 详细信息 -->
                {% if user_profile %}
                <div class="content">
                    <div class="columns is-multiline">
                        <div class="column is-6">
                            <p>
                                <span class="icon has-text-info">
                                    <i class="fas fa-venus-mars"></i>
                                </span>
                                {{ user_profile.get_gender_display|default:"未设置" }}
                            </p>
                            <p>
                                <span class="icon has-text-success">
                                    <i class="fas fa-birthday-cake"></i>
                                </span>
                                {{ user_profile.birthday|date:"Y年m月d日"|default:"未设置" }}
                            </p>
                        </div>
                        <div class="column is-6">
                            <p>
                                <span class="icon has-text-danger">
                                    <i class="fas fa-map-marker-alt"></i>
                                </span>
                                {{ user_profile.address|default:"未设置" }}
                            </p>
                            <p>
                                <span class="icon has-text-warning">
                                    <i class="fas fa-phone"></i>
                                </span>
                                {{ user_profile.mobile|default:"未设置" }}
                            </p>
                        </div>
                    </div>

                    <!-- 个人简介 -->
                    {% if user_profile.personl_profile %}
                    <div class="box">
                        <h4 class="subtitle is-6 has-text-weight-bold">个人简介</h4>
                        <p>{{ user_profile.personl_profile|linebreaks }}</p>
                    </div>
                    {% endif %}
                </div>
                {% else %}
                <div class="notification is-warning is-light">
                    该用户尚未完善个人信息
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 用户文章列表 -->
    <div class="box">
        <h2 class="title is-4">最新文章</h2>
        <div class="list is-hoverable">
            {% for post in page_obj %}
            <a class="list-item" href="{% url 'blog:post_detail' post.id %}">
                {{ post.title }}
                <span class="has-text-grey is-size-7 ml-3">
                    {{ post.add_date|date:"Y-m-d" }}
                </span>
            </a>
            {% empty %}
            <div class="notification is-light">
                该用户暂未发布任何文章
            </div>
            {% endfor %}
        </div>

        <!-- 分页 -->
        {% if page_obj.paginator.num_pages > 1 %}
        <nav class="pagination is-centered mt-5">
            <ul class="pagination-list">
                {% for num in page_obj.paginator.page_range %}
                <li>
                    <a class="pagination-link {% if num == page_obj.number %}is-current{% endif %}"
                       href="?page={{ num }}">{{ num }}</a>
                </li>
                {% endfor %}
            </ul>
        </nav>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .author-card {
        border-radius: 10px;
        box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }

    .author-card:hover {
        transform: translateY(-3px);
    }

    .stats-tags .tag {
        margin-right: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #eee;
        transition: background-color 0.2s;
    }

    .list-item:hover {
        background-color: #f5f5f5;
    }
</style>
{% endblock %}